<script setup>
import {ref} from 'vue'
import {loginApi} from "@/api/auth.js";

// 登录类型
const loginType = ref('password');

// 切换登录类型
const changeLoginType = (type) => {
  loginType.value = type;
}

// 立即注册
const signUpNow = () => {
  window.location.href = '/auth/register';
}

// 表单ref
const formRef = ref();

// 表单验证
const rules = ref({
  account: [
    {required: true, message: '请输入账号', trigger: 'blur'},
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'},
  ],
  phone: [
    {required: true, message: '请输入手机号', trigger: 'blur'},
  ],
  code: [
    {required: true, message: '请输入短信验证码', trigger: 'blur'},
  ],
})

// 表单数据
const form = ref({
  account: '',
  password: '',
  phone: '',
  code: '',
});

// 点击登录按钮
const clickLoginBtn = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      if (form.value.account && form.value.password) {   // 账号密码登录
        const res = await loginApi({account: form.value.account, password: form.value.password});
        if (res.data) {
          // 得到token
          sessionStorage.setItem('token', res.data.token);
          // 跳转到首页
          window.location.href = '/';
        }
      } else if (form.value.phone && form.value.code) {   // 手机号验证码登录

      }
    }
  })
}
</script>

<template>
  <el-form ref="formRef" :rules="rules" status-icon :model="form">
    <div class="form_header">
      <div class="quick_login" :class="loginType==='quick'?'login_type_click':''"
           @click="changeLoginType('quick')">快捷登录
      </div>
      <div class="password_login" :class="loginType==='password'?'login_type_click':''"
           @click="changeLoginType('password')">密码登录
      </div>
    </div>
    <div class="form_body">
      <div class="quick_login_box" v-if="loginType==='quick'">
        <el-form-item class="form_item" prop="phone">
          <el-input placeholder="请输入手机号" size="large" v-model="form.phone">
            <template #prepend>+86</template>
          </el-input>
        </el-form-item>
        <el-form-item class="form_item" prop="code">
          <el-input placeholder="请输入短信验证码" size="large" v-model="form.code">
            <template #append>获取短信验证码</template>
          </el-input>
        </el-form-item>
      </div>
      <div class="pwd_login_box" v-else>
        <el-form-item class="form_item" prop="account">
          <el-input v-model="form.account" placeholder="请输入账号" size="large"/>
        </el-form-item>
        <el-form-item class="form_item" prop="password">
          <el-input v-model="form.password" placeholder="请输入密码" size="large" show-password/>
        </el-form-item>
        <div class="forget_pwd">忘记密码</div>
      </div>
      <div class="form_item login_btn_box">
        <el-button @click="clickLoginBtn">登录</el-button>
        <el-button>微信扫码登录</el-button>
      </div>
      <div class="form_item not_account">
        <span>没有账号？</span>
        <span @click="signUpNow">立即注册</span>
      </div>
    </div>
  </el-form>
</template>

<style scoped lang="scss">
.el-form {
  width: 100%;
  height: 100%;
  padding: 10px;

  .form_header {
    height: 40px;
    display: flex;
    align-items: center;
    color: #666666;

    .quick_login {
      cursor: pointer;
      border-bottom: 3px solid transparent;
      padding-bottom: 1px;
    }

    .password_login {
      margin-left: 20px;
      cursor: pointer;
      border-bottom: 3px solid transparent;
      padding-bottom: 1px;
    }

    .login_type_click {
      border-bottom-color: var(--cx-color1);
      color: black;
      font-weight: bold;
    }
  }

  .form_body {
    .form_item {
      width: 100%;
      margin-top: 20px;

      .el-input {
        width: 100%;
      }
    }

    .login_btn_box {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .el-button {
        width: 100%;
        height: 40px;
        border: none;

        &:first-child {
          color: white;
          background-color: var(--cx-color1);
        }

        &:last-child {
          margin-top: 20px;
          margin-left: 0;
          color: var(--cx-color1);
          background-color: transparent;
          border: 1px solid var(--cx-color1);
        }
      }
    }

    .forget_pwd {
      text-align: right;
      margin-top: 10px;
      margin-bottom: -10px;
      font-size: 12px;
      color: var(--cx-color1);
      font-weight: bold;
      cursor: pointer;
    }

    .not_account {
      text-align: center;
      font-size: 14px;

      span:nth-child(2) {
        cursor: pointer;
        margin-left: 5px;
        font-weight: bold;
        color: var(--cx-color1);
      }
    }
  }
}
</style>